<template>
	<view class="box">
		<view class="kong_border"></view>
		<view class="border">
			<view class="border_top flexs2">
				<image @click="goback" class="back_image" src="../../static/image/ico_dh_bk@2x.png" mode=""></image>
				<view class="topbiao">课程详情</view>
				<view class="text-center">
					<image class="tiwen_image" src="../../static/image/dt_sc_no.png" mode="" 
					v-show="InfoList.is_collect==0" @click="CollClass(InfoList.is_collect)"></image>
					<image class="tiwen_image" src="../../static/image/dt_jc_sel.png" mode="" 
					v-show="InfoList.is_collect==1" @click="CollClass(InfoList.is_collect)"></image>
				</view>
			</view>
		</view>
		<view class="all_big_box">
			<image class="image_top" :src="picture.getImgUrl(InfoList.image)" mode=""></image>
			<view class="title_top flexs3">
				<view class="title_list" @click="choosecolor(1)" :class="{'top_border':bordernum==1}">
					<view class="">概况</view>
					<view v-if="bordernum==1" class="border_color"></view>
				</view>
				<view class="title_list" @click="choosecolor(2)" :class="{'top_border':bordernum==2}">
					<view class="">历年真题</view>
					<view v-if="bordernum==2" class="border_color"></view>
				</view>
				<view class="title_list" @click="choosecolor(3)" :class="{'top_border':bordernum==3}">
					<view class="">复习资料</view>
					<view v-if="bordernum==3" class="border_color"></view>
				</view>
				<view class="title_list" @click="choosecolor(4)" :class="{'top_border':bordernum==4}">
					<view class="">模拟刷题</view>
					<view v-if="bordernum==4" class="border_color"></view>
				</view>
			</view>
			<view class="kong"></view>
			<!-- 概括 -->
			<view class="gaiguo" v-if="bordernum==1">
				<view class="top_next">
					<view class="flexs1">
						<view class="kong_color"></view>
						<view class="top_xinxi">基本信息</view>
					</view>
					<view class="top_kecheng">课程名称：{{InfoList.name}}</view>
				</view>
				<view class="jiangyi flexs3">
					<view class="jiang_list">
						<view class="text-center jiangyi_num">{{InfoList.infomation_num+InfoList.true_title_num}}</view>
						<view class="jiangyi_center">真题|讲义</view>
					</view>
					<view class="jiang_list">
						<view class="text-center jiangyi_num">{{InfoList.question_num}}</view>
						<!-- <view class="text-center jiangyi_num">1</view> -->
						<view class="jiangyi_center">模考|刷题</view>
					</view>
					<view class="jiang_list">
						<view class="text-center jiangyi_num">{{InfoList.buy_num}}</view>
						<view class="jiangyi_center">学习人数</view>
					</view>
				</view>
				<view class="student">
					<view class="flexs1">
						<view class="student_name">最新学员</view>
						<view class="student_right1 flexs1">
							<image v-for="(item,index) in InfoList.avatar_list" :key="index" 
							class="avator" :src=" picture.getImgUrl(item.avatar)" mode=""></image>
						</view>
					</view>
					<view class="flexs1">
						<view class="student_name">优惠价格</view>
						<view class="student_right">
							<view>
								<text class="student_size">￥</text>
								<block v-if='InfoList.now_price'>
									<text class="student_money">{{InfoList.now_price | subprice}}</text>
								</block>
								<block v-if='InfoList.original_price'>
									<!-- <text class="student_ren"></text> -->
									<text class="student_moneyhui">￥{{InfoList.original_price | subprice}}</text>
								</block>
							</view>
							<view class="student_vip">VIP:￥{{InfoList.discount_price}}</view>
						</view>
					</view>
					<view class="student_list flexs1">
						<view class="student_name">购买说明</view>
						<view class=" student_center flexs1">{{InfoList.buy_explain}}</view>
					</view>
					<view class="student_list flexs1">
						<view class="student_name">提分利器</view>
						<view class=" student_center flexs1">{{InfoList.raise_score}}</view>
					</view>
					<view class="student_list flexs1 ">
						<view class="student_name">复习时长</view>
						<view class=" student_center border_nun flexs1">{{InfoList.review_time}}</view>
					</view>
				</view>
				<view class="kong"></view>
				<view class="mingxi">
					<view class="flexs1">
						<view class="kong_color"></view>
						<view class="top_xinxi">内容明细</view>
					</view>
					<view class="new_box" v-html="InfoList.content">
						<!-- {{InfoList.content}} -->
					</view>
				</view>
				<view class="kong"></view>
				<view class="mubiao">
					<view class="flexs1">
						<view class="kong_color"></view>
						<view class="top_xinxi">学习目标</view>
					</view>
					<view class="mubiao_text">
						<view v-html="InfoList.study_target"></view>
						<!-- {{InfoList.study_target}} -->
					</view>
				</view>
				<view class="kong"></view>
				<view class="pingjia">
					<view class="flexs2">
						<view class="flexs1">
							<view class="kong_color"></view>
							<view class="top_xinxi">学员评价({{commentlist.length}})</view>
						</view>
						<view class="flexs1" style="margin-top: 30rpx;" @click="tomore">
							<view class="pingjia_more">查看更多</view>
							<image class="image_next" src="../../static/image/grzx_ico_jr_hui@2x.png" mode=""></image>
						</view>
					</view>
					<view class="pingjia_list" v-for="(item,index) in commentlist " :key="index">
						<view class="pingjia_top flexs1">
							<image :src=" picture.getImgUrl(item.user.avatar)?picture.getImgUrl(item.user.avatar):'../../static/image/gexx_img_mrtx@2x.png'" mode=""></image>
							<view class="">
								<view class="pingjia_user">{{item.user.nickname}}</view>
								<view class="pingjia_minut">{{item.createtime}}</view>
							</view>
						</view>
						<view class="pingjia_center">{{item.evaluate}}</view>
					</view>
				</view>
			</view>
			<!-- 历年真题 -->
			<view class="zhen_box" v-if="bordernum==2" v-for="(item,index) in trueList" :key='index'>
				<view class="zhen_list flexs1">
					<!-- <view class="zhen_title flexs">{{item.class}}</view> -->
					<view class="zhen_center">{{item.name}}</view>
					<image @click="tokedetails(item.id)" class="zhen_xiazai" src="../../static/image/fxzl_ico_xz@2x.png" mode=""></image>
				</view>
			</view>
			<!-- 复习资料 -->
			<view class="zhen_box" v-if="bordernum==3" v-for="(item,index) in infomationlist" :key='index'>
				<view class="zhen_list flexs1">
					<!-- <view class="zhen_title flexs">{{item.class}}</view> -->
					<view class="zhen_center">{{item.name}}</view>
					<image @click="tokedetails(item.id)" class="zhen_xiazai" src="../../static/image/fxzl_ico_xz@2x.png" mode=""></image>
				</view>
			</view>
			<!-- 模拟刷题 -->
			<view class="zhen_box" v-if="bordernum==4" v-for="(item,index) in questionList" :key='index' >
				<view class="zhen_list flexs1"	@click='gopaperdetail(item.id)'>
					<!-- <view class="zhen_title flexs">{{item.class}}</view> -->
					<view class="zhen_center">{{item.name}}</view>
					<image class="zhen_xiazai" src="../../static/image/mkst_ico_bj@2x.png" mode=""></image>
				</view>
			</view>

			<view class="kongs_border"></view>
			<view class="bottom_last flexs1">
				<view class=" text-center" @click="topingjia(InfoList.is_buy)">
					<image class="pingjia_image" src="../../static/image/mqpj_ico_pj_h@2x.png" mode=""></image>
					<view class="">评价</view>
				</view>
				<view class="bottom_ping text-center" @click="totiwen">
					<image class="tiwen_image" src="../../static/image/mqpj_ico_tw@2x.png" mode=""></image>
					<view class="">提问</view>
				</view>
				<view class="butns flexs" @click="togoumai">立即购买</view>
			</view>
			<!-- 课程评价 -->
			<view class="cu-modal" :class="dialogVisible?'show':''">
				<view class="cu-dialog" v-if="dialogVisible">
					<view class="model_name">课程评价</view>
					<view class="mode_center  flexs3">
						<view class="mode_list flexs" :class="{'model_border_list':color_y==3}" @click="choose_color(3)">
							<image class="model_haop" src="../../static/image/qbpj_ico_hp@2x.png" mode=""></image>
							<view class="model_texth">好评</view>
						</view>
						<view class="mode_list flexs" :class="{'model_border_list':color_y==2}" @click="choose_color(2)">
							<image class="model_haop" src="../../static/image/kcxq_ico_zp@2x.png" mode=""></image>
							<view class="model_texth">中评</view>
						</view>
						<view class="mode_list flexs" :class="{'model_border_list':color_y==1}" @click="choose_color(1)">
							<image class="model_haop" src="../../static/image/kcxq_ico_cp@2x.png" mode=""></image>
							<view class="model_texth">差评</view>
						</view>
					</view>

					<textarea class="input_model" v-model='commentcontent' placeholder-class="model_place" placeholder="输入课程评价" />
					<view class="model_butns flexs " @click="entrueclick">确认提交</view>
						<image v-if="dialogVisible" @click="clearHistory" class="model_deleter" 
						src="../../static/image/ico_tc_gb_big@2x.png" mode=""></image>
				</view>
			</view>
			<view class="cu-modal" :class="isbuystatus?'show':''">
				<view class="cu-dialog" v-if="isbuystatus">
					<view class="model_name">提示</view>
						<view class="model_rantext">
							您还未报名该课程，无法评价。
						</view>
						<view class="model_butns flexs " @click="stupid">确定</view>
						<!-- <image v-if="isbuystatus" @click="stupid" 
						class="model_deleter" src="../../static/image/ico_tc_gb_big@2x.png" mode=""></image> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {ordercreate,evaluate,cruuuate,currdetail,collect,cancelcollect} from '@/api/data.js'
	export default {
		data() {
			return {
				color_y:'3',
				commentcontent:'',//评价内容
				border_center: '我是富文本',
				bordernum: 1,
				dialogVisible: false, //弹框显示
				id:'',
				InfoList:[],
				trueList:[],
				questionList:[],
				
				page:1,
				limit:10,
				commentlist:[],//评论列表
				
				isbuystatus:false,//是否有资格评价弹框
				is_buy:'',
				
				ordernum:'',
				price:'',
				orderSn:'',
				infomationlist:[]
			}
		},
		onLoad(option) {
			this.id=option.id
			this.getInfoList()
			this.getcommentlist()
		},
		onShow() {
			this.getInfoList()
		},
		filters:{
			subprice(item){
				let chapter = null
				if(item){
					chapter = item.substring(0,item.length-3)
				}
				return	chapter
			}
		},
		methods: {//付款页面
			togoumai() {
				// type订单类型：1=课程，2=试题，3=助攻
				let obj = {
					type:1,
					q_id:'',
					c_id:this.id,
					a_id:''
				}
				ordercreate(obj).then(res=>{
					if(res.code == 1){
						uni.navigateTo({
							url:`paycenter?orderid=${res.data.id}&type=${this.InfoList.type}&id=${this.id}`
						})
					}else{
						this.$msg(res.msg)
					}
				})
			},
			
			gopaperdetail(id){//去刷题判断是否购买
				if(this.is_buy==1){
					uni.navigateTo({
						url:'../Brush/testDetL?id='+id
					})
				}else{
					let obj = {
						type:1,
						q_id:'',
						c_id:this.id,
						a_id:''
					}
					ordercreate(obj).then(res=>{
						if(res.code == 1){
							uni.navigateTo({
								url:`paycenter?orderid=${res.data.id}&type=1&id=${this.id}`
							})
						}else{
							this.$msg(res.msg)
						}
					})
				}
			},
			getcommentlist(){
				let obj = {
					page:this.page,
					pageSize:this.limit,
					c_id:this.id,
					level:0
				}
				evaluate(obj).then(res=>{
					if(res.code == 1){
						if(this.page == 1){
							this.commentlist = res.data
						}else{
							this.commentlist = this.commentlist.concat(res.data)
						}
					}
				})
			},
			tokedetails(id) {
				uni.navigateTo({
					url:"kedetails?trueid="+id+'&kechengid='+this.id+'&is_buy='+this.is_buy
				})
			},
			totiwen() {
				uni.navigateTo({
					url:'tiwen?id='+this.id
				})
			},
			choose_color(e){
				// 1:好评2:中评3:差评
				this.color_y=e
			},
			// 取消
			showDialog() {
				this.dialogVisible = !this.dialogVisible
			},
			//确定
			entrueclick(){
				this.showDialog()
				let obj = {
					c_id:this.id,
					level:this.color_y,
					evaluate:this.commentcontent
				}
				cruuuate(obj).then(res=>{
					this.$msg(res.msg)
					if(res.code == 1){
						// 重新获取评价列表
						this.getcommentlist()
						this.commentcontent=''
					}else{
						this.$msg(res.msg)
					}
				})
			},
			clearHistory() {
				this.showDialog()
			},
			topingjia(num) {
				if(num == '0'){
					this.isbuystatus = true
				}else{
					this.showDialog()
				}
			},
			stupid(){
				this.isbuystatus = false
			},
			tomore() {
				uni.navigateTo({
					url: "pingjia?id="+this.id
				})
			},
			choosecolor(e) { //选择标题
				this.bordernum = e
				console.log(this.bordernum)
			},
			// 获取详情
			getInfoList(){
				var obj = {
					c_id:this.id
				};
				currdetail(obj).then(res => {
					if (res.code == 1) {
						this.InfoList = res.data
						this.is_buy = res.data.is_buy 
						if(this.InfoList.true_title.length!=0){
							this.trueList=this.InfoList.true_title
						}
						if(this.InfoList.question.length!=0){
							this.questionList=this.InfoList.question
						}
						if(this.InfoList.infomation.length!=0){
							this.infomationlist=this.InfoList.infomation
						}
					}
				});
			},
			CollClass(val){
				if(val==0){
					var obj = {
						c_id:this.id
					};
					collect(obj).then(res => {
						if (res.code == 1) {
							this.$msg(res.msg)
							this.getInfoList()
						}
					});
				}else if(val==1){
					var obj = {
						c_id:this.id
					};
					cancelcollect(obj).then(res => {
						if (res.code == 1) {
							this.$msg(res.msg)
							this.getInfoList()
						}
					});
				}
			},
			goback(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
		overflow-x: hidden;
	}
    .kong_border {
    	width: 100%;
    	height: var(--status-bar-height);
    	background-color: #FFFFFF;
    }
    .topbiao{
    	font-size: 36rpx;
    	color: #333333;
    }
    
    .nothing {
    	margin-top: 200rpx;
    }
    
    .nothing image {
    	width: 354rpx;
    	height: 253rpx;
    }
    
    .text_no {
    	color: #666666;
    	font-size: 26rpx;
    	margin-top: 15rpx;
    }
    
    .border_top {
    	width: 100%;
    	height: 100rpx;
    	padding: 0 30rpx;
    	background-color: #FFFFFF;
		border-bottom: 1rpx solid #F5F5F5;
    }
    
    .back_image {
    	width: 20rpx;
    	height: 36rpx;
    }
    
    .tiwen_image {
    	width: 36rpx;
    	height: 36rpx;
    }
    .tiwen_text{
    	font-size: 22rpx;
    	font-family: PingFang SC;
    	font-weight: 500;
    	color: #333333;
    }

	.box {
		width: 100%;
		height: 100vh;
		color: #333333;
		overflow: hidden;
	}
	.all_big_box{
		width: 100%;
		height: calc(100% - 100rpx);
		overflow-y: auto;
	}
	.gaiguo {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
	}
	/* 历年真题 */
	.zhen_box {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
	}
	.zhen_list {
		width: 690rpx;
		height: 100rpx;
		border-bottom: solid 1rpx #F5F5F5;
		margin: 0 auto;
		position: relative;
	}
	.zhen_title {
		width: auto;
		padding: 0 10rpx;
		height: 36rpx;
		background: #FFF0EF;
		border-radius: 4rpx;
		color: #FF3B30;
		font-size: 22rpx;
	}
	.zhen_center {
		width: 460rpx;
		height:40rpx;
		font-size: 28rpx;
		color: #333333;
		margin-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap; /*规定段落中的文本不进行换行 */
	}
	.zhen_xiazai {
		width: 27rpx;
		height: 26rpx;
		position: absolute;
		right: 42rpx;
	}
	/* 课程评价 */
	.model_haop {
		width: 20rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}
	.model_deleter {
		width: 60rpx;
		height: 60rpx;
		z-index: 9999;
		position: fixed;
		margin-top: 120rpx;
		margin-left: -30rpx;
	}
	.model_rantext {
		width: 570rpx;
		line-height: 100rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 0rx 0rpx;
		margin: 0 auto;
	}
	.input_model {
		width: 510rpx;
		height: 130rpx;
		background: #F2F2F2;
		margin: 0 auto;
		text-align: left;
		padding-left: 20rpx;
		padding-top: 10rpx;
		font-size: 28rpx;
	}
	.model_place {
		font-size: 26rpx;
		color: #999999;
	}
	.mode_center {
		height: 100rpx;
		padding: 0 30rpx;
	}
	.model_butns {
		width: 300rpx;
		margin: auto;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
		height: 60rpx;
		background: #FFDD47;
		border-radius: 6rpx;
		font-size: 26rpx;
		color: #333333;
		/* margin: 30rpx auto 0; */
	}
	.mode_list {
		width: 110rpx;
		height: 44rpx;
		border: 1px solid #CCCCCC;
		border-radius: 6rpx;
	}

	.model_border_list {
		border: 1px solid #FFDD47;
		background: #FFFAE6;
		border-radius: 6rpx;
	}

	.model_texth {
		font-size: 26rpx;
	}

	.model_name {
		width: 100%;
		line-height: 80rpx;
		font-size: 30rpx;
		background: #F5F5F5;
		font-size: bold;
	}

	.text-center {}

	/* pingjia */
	.haoping_image {
		width: 20rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}

	/* last */
	.pingjia_image {
		width: 40rpx;
		height: 44rpx;
	}

	.bottom_last {
		width: 100%;
		height: 100rpx;
		padding-left: 58rpx;
		font-size: 24rpx;
		position: fixed;
		bottom: 0;
		z-index: 999;
		background-color: #FFFFFF;
	}

	.bottom_ping {
		margin: 0 40rpx;
	}

	.tiwen_image {
		width: 44rpx;
		height: 44rpx;
	}

	.kongs_border {
		width: 100%;
		height: 130rpx;
		/* #ifdef APP-PLUS */
		height: 190rpx;
		/* #endif */
		background-color: #F5F5F5;
	}

	.butns {
		width: 484rpx;
		height: 70rpx;
		background: #FFDD47;
		border-radius: 10rpx;
		font-size: 30rpx;
	}

	/* pingjia */
	.pingjia {
		width: 100%;
		padding: 0rpx 30rpx;
		height: auto;
		padding-bottom: 30rpx;
	}

	.pingjia_list {
		width: 100%;
		margin-top: 10rpx;
	}

	.pingjia_center {
		font-size: 28rpx;
	}

	.pingjia_user {
		font-size: 30rpx;
	}

	.pingjia_minut {
		font-size: 24rpx;
		color: #999999;
	}

	.image_next {
		width: 12rpx;
		height: 22rpx;
	}

	.pingjia_more {
		color: #666666;
		font-size: 22rpx;
		margin-right: 10rpx;
	}

	.pingjia_top {
		width: 100%;
		height: 100rpx;
	}

	.pingjia_top image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	/* mubiao */
	.mubiao {
		width: 100%;
		padding: 0rpx 30rpx;
		height: auto;
		padding-bottom: 30rpx;
	}

	.mubiao_text {
		font-size: 26rpx;
	}

	/* mingxi */
	.mingxi {
		width: 100%;
		padding: 0rpx 30rpx;
		height: auto;
		padding-bottom: 30rpx;
	}

	.border_red {
		width: 690rpx;
		height: 160rpx;
		margin: 20rpx auto 0;
		border: solid 1rpx red;
	}

	/* student */
	.student_size {
		font-size: 24rpx;
		color: #FF3B30;
	}

	.student_list {
		height: 90rpx;
	}

	.student_money {
		font-size: 34rpx;
		color: #FF3B30;
	}

	.student_ren {
		font-size: 24rpx;
		color: #999999;
		text-decoration: line-through;
	}

	.student_moneyhui {
		font-size: 24rpx;
		color: #999999;
		text-decoration: line-through;
		margin-left: 6rpx;
	}

	.student_vip {
		width: auto;
		height: 40rpx;
		padding: 0 10rpx;
		background: #FFE7E6;
		border-radius: 6rpx;
		color: #FF3B30;
		font-size: 26rpx;
		text-align: center;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title_top {
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
	}

	.kong {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}

	.image_top {
		width: 100%;
		height: 300rpx;
	}

	.title_list {
		font-size: 30rpx;
	}

	.border_color {
		width: 60rpx;
		height: 4rpx;
		background-color: #FFDD47;
		border-radius: 2rpx;
		margin: 0 auto;
	}

	.top_border {
		font-weight: bold;
	}

	.kong_color {
		width: 4rpx;
		height: 20rpx;
		border-radius: 20rpx;
		background-color: #FFDD47;
		margin-right: 10rpx;
		margin-top: 30rpx;
	}

	.top_xinxi {
		width: 100%;
		line-height: 50rpx;
		font-size: 34rpx;
		margin-top: 30rpx;
	}
	.new_box{
	/* 	width:90%;
		margin:0 auto;
		border:1px solid */
	}
	.top_kecheng {
		width: 100%;
		line-height: 80rpx;
		font-size: 28rpx;
	}

	.top_next {
		padding: 0 30rpx;
	}

	.top_kecheng {}

	.jiangyi {
		width: 650rpx;
		height: 140rpx;
		background: #FFFFFF;
		box-shadow: 0px 2rpx 10px 0px rgba(15, 11, 2, 0.13);
		border-radius: 10rpx;
		margin: 0 auto;
	}

	.jiangyi_num {
		line-height: 42rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		color: #FF3B30;
	}

	.jiangyi_center {
		line-height: 42rpx;
		color: #666666;
		font-size: 26rpx;
	}

	.avator {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 10rpx;
		border-radius: 50%;
	}

	.border_nun {
		border-bottom: none !important;
	}

	.student_right {
		width: 500rpx;
		height: 105rpx;
		border-bottom: solid 1rpx #E5E5E5;
		display: flex;
		/* justify-content: flex-start; */
		justify-content: space-between;
		align-items: center;
	}
	.student_right1 {
		width: 500rpx;
		height: 105rpx;
		border-bottom: solid 1rpx #E5E5E5;
	}

	.student_center {
		width: 500rpx;
		height: 100%;
		color: #333333;
		font-size: 24rpx;
		border-bottom: solid 1rpx #E5E5E5;
	}

	.student_name {
		width: 120rpx;
		font-size: 24rpx;
		color: #666666;
		margin-right: 15rpx;
	}

	.student {
		width: 650rpx;
		height: 475rpx;
		background: #FFFFFF;
		box-shadow: 0px 2rpx 10px 0rpx rgba(15, 11, 2, 0.13);
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 0 20rpx;
		margin-bottom: 30rpx;
	}

	/* 弹框样式 */
	.btns {
		width: 100%;
		height: 120rpx;
		letter-spacing: 3rpx;
		font-size: 30rpx;
		border-top: 1px solid #E8E8E8;
	}

	.btnsa {
		width: 50%;
		padding: 36rpx 0;
		background-color: white;
	}

	.btnsa1 {
		border-right: 1px solid #E8E8E8;
		color: #999999;
	}

	.padding-xl {
		background-color: white;
		padding: 70rpx 0;
		letter-spacing: 3rpx;
		font-size: 30rpx;
		color: #333333
	}

	.cu-dialog {
	    position: relative;
	    display: inline-block;
	    vertical-align: middle;
	    margin-left: auto;
	    margin-right: auto;
	    max-width: 100%;
	    background-color: #f8f8f8;
	    border-radius: 5px;
	    overflow: hidden;
	}
	.color {
		color: #fbce59;
	}

</style>
